<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Tesseract.js Offline</title>
  <script src="/js/tesseract.min.js"></script>
  <script type="module">
    const worker = await Tesseract.createWorker("chi_sim", 1, {
      workerPath: '/js/worker.min.js',
      langPath: '/lang-data',
      corePath: '/js/tesseract.js-core',
      logger: m => console.log(m),
    });
    const recognize = async function (evt) {
      const files = evt.target.files;
      document.getElementById("imgInput").src = URL.createObjectURL(files[0]);
      console.log(files)

      // const ret = await worker.recognize(files[i]);
      //   console.log(ret.data.text);
      const ret = await worker.recognize(files[0], {rotateAuto: true}, {imageColor: true, imageGrey: true, imageBinary: true});
      //document.getElementById("imgOriginal").src = ret.data.imageColor;
      //document.getElementById("imgGrey").src = ret.data.imageGrey;
      document.getElementById("imgInput").src = ret.data.imageBinary;
      document.getElementById('result').innerHTML = ret.data.text;
    }
    const elm = document.getElementById('uploader');
    elm.addEventListener('change', recognize);
  </script>
</head>

<body>
  <input type="file" id="uploader">
  <div class="row">
    <div class="column">
      <p>Input Image</p>
      <img id="imgInput" style="max-width:500px;">
    </div>
    <!-- <div class="column">
      <p>Rotated, Original Color</p>
      <img id="imgOriginal" style="max-width:500px;">
    </div> -->
    <!-- <div class="column">
      <p>Rotated, Grey</p>
      <img id="imgGrey" style="max-width:500px;">
    </div>
    <div class="column">
      <p>Rotated, Binary</p>
      <img id="imgBinary" style="max-width:500px;">
    </div> -->
    <pre id="result"></pre>
  </div>
</body>
</html> 